
<div>
  <h2>简介<i>introduce</i></h2>
  <ul>
    <li>
      webapck 是一个开源的 Javascript 模块打包工具，其核心的功能是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终<span>合并为一个 JS 文件</span>，这个过程就焦作模块打包
    </li>
    <li>
      在过去的很长一段时间内，Javacsript 这门语言并没有模块这一概念。如果工程中有多个 JS 文件，我们只能通过 script 标签将他们一个个插入页面中
    </li>
    <li>
      <h3>为什么选择 webpack ？ </h3>
      <ul>
        <li>
          webpack 默认支持多个模块标准
        </li>
        <li>
          webpack 有完整的代码分割(split)解决方案,从字面意思理解，它可以分割打包后的资源，首屏只加载必要部分，不太重要的功能放到后面动态的加载。这对于体积较大的应用来说，可以有效地减少资源体积
        </li>
        <li>
          webpack 可以处理各种类型的资源
        </li>
        <li>
          安装 webpack 有两种方式:<span>全局安装</span>在与他人协作时，由于每个人的系统中的 webpack 版本不同，可能会导致输出结果不一致。<span>推荐局部安装</span>
        </li>
        <li>
          webpack 是核心模块，webpack-cli 则是命令行工具
        </li>
      </ul>
    </li>
    <li>
      <h3>第一个应用</h3>
      <ul>
        <li>entry: 资源打包入口</li>
        <li>output-filename: 输出资源名</li>
        <li>mode: 打包模式 <span>webpack 为开发者提供了development/production/none模式</span>，当位于 development或者 production 模式下时，它会自动添加适合于当前模式的一系列配置，减少了人为的工作量</li>
      </ul>
    </li>
    <li>
      <h3>使用默认目录</h3>
      <ul>
        <li>对于资源输出目录来说，Webpack 默认是/dist</li>
        <li>默认的代码源入口就是 src/index.js</li>
        <li>虽然命名并不是强制的，Webpack 提供了配置项让我们去进行更改，但还是建议遵循统一的命名规范，这样会使得大体结构比较清晰，也利于多人协作</li>
        <li>
          webpack的默认配置文件为 webpack.config.js,<span>也可以使用其他文件名，需要用命令行参数指定</span>
        </li>
        <li>
          webpack 对于 output.path 要求是绝对路径，（从系统跟目录开始的完路径）
        </li>
      </ul>
    </li>
    <li>
      <h3>webpack-dev-server</h3>
      <ul>
        <li>wenpack-dev-serve 仅仅在本地开发时才会用到，生产环境下用不到，所以放在 devDependencies 下是比较合理的</li>
        <li>假如工程上线时要进行依赖安装，可以设置 mode: production过滤掉 devDependencies中的冗余模块加快安装和发布的速度</li>
        <li>行驶的职能：1.令 Webpack 进行模块打包，并处理打包结果的资源请求 。2.作为普通的 WebServer，处理静态文件请求</li>
        <li>
          直接使用 Webpack跟使用 webpack-dev-server有一个很大的区别，前者每次都会生成 bundle.js，而 webpack-dev-server只是将打包结果放在内存中，并不会写入实际的 bundle.js，在每次 webpack-dev-server接收到请求时，都只是将内存的打包结果返回给浏览器。这点可以通过删除工程中的 dist 目录来验证，你会发现即便 dist 目录不存在，刷新页面后功能仍然是正常的。
        </li>
        <li>
          webpack-dev-server还有一项很快捷的特性就是自动刷新 (live-load),还可以配置热替换
        </li>
      </ul>
    </li>
  </ul>
  <!-- <script data-src="./test.js"></script> -->
</div>